<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" href="/mi/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/mi/CSS/currency.css"/>
    <link rel="stylesheet" type="text/css" href="/mi/CSS/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/mi/CSS/order.css"/>
</head>
<body>
<th:block th:include="header"/>
<div class="title">
    <div class="container">
        <a href="/">首页</a> / 我的订单
    </div>
</div>

<div class="profile-box">
    <div class="container clearfix">
        <div class="fl profile-left">    <!-- 左侧 -->
            <div class="menu-box">
                <h3>订单中心</h3>
                <ul>
                    <li class="act">我的订单</li>
                    <li>评价晒单</li>
                    <li>话费充值订单</li>
                    <li>以旧换新订单</li>
                </ul>
            </div>
            <div class="menu-box">
                <h3>个人中心</h3>
                <ul>
                    <li><a href="profile.html">我的个人中心</a></li>
                    <li>消息通知</li>
                    <li>购买资格</li>
                    <li>现金账户</li>
                    <li>小米礼品卡</li>
                    <li>现金券</li>
                    <li>喜欢的商品</li>
                    <li>优惠券</li>
                    <li><a href="address.html">收货地址</a></li>
                    <li>红包</li>
                </ul>
            </div>
            <div class="menu-box">
                <h3>售后服务</h3>
                <ul>
                    <li>服务记录</li>
                    <li>申请服务</li>
                    <li>领取快递报销</li>
                </ul>
            </div>
            <div class="menu-box">
                <h3>账户管理</h3>
                <ul>
                    <li><a href="personal.html" target="_blank">个人信息</a></li>
                    <li>修改密码</li>
                </ul>
            </div>
        </div>


        <div class="fl profile-right">    <!-- 右侧 -->
            <div class="infor-box">
                <div class="order-title">
                    <h1>我的订单</h1>
                    <span>请谨防钓鱼链接或诈骗电话，了解更多></span>
                </div>

                <div class="clearfix">

                    <ul class="content-title clearfix">
                        <li id='0' class="act">全部有效订单</li>
                        <li id='1'>待支付</li>
                        <li id='2'>待收货</li>
                        <li id='3'>订单回收站</li>
                    </ul>

                    <div class="content-search fr">
                        <input id="search-input" class="acti" type="text" placeholder="输入商品名称、订单号"/>
                        <span id="search-btn" class="iconfont icon-chazhaosousuo"></span>
                    </div>

                    <ul class="content">
                        <li class="act">
                            <div class="order">
                                <div class="order-content-title">
                                    <div class="content-wait">等待付款</div>
                                    <div class="content-des clearfix">
                                        <span>2021年09月13日 08:58</span>
                                        <span>|</span>
                                        <span>张三</span>
                                        <span>|</span>
                                        <span>订单号：<a href="">5210913513100972</a></span>
                                        <span>|</span>
                                        <span>在线支付</span>
                                        <div class="cope fr">应付金额：<b>2199.00</b>元</div>
                                    </div>
                                </div>
                                <div class="order-content-details clearfix">
                                    <div class="details-img fl"><img src="img/order/mode.jpg"></div>
                                    <div class="details-title fl">
                                        <div>小米净水器S1 800G 白色</div>
                                        <div>2199元 × 1</div>
                                    </div>
                                    <div class="details-button fr">
                                        <button class="details-buy" type="button">立即付款</button>
                                        <button type="button">订单详情</button>
                                        <button type="button">联系客服</button>
                                    </div>
                                </div>
                            </div>
                            <div class="order-rotate">
                                <span class="iconfont icon-zuo"></span>
                                <span class="rotate-num">1</span>
                                <span class="iconfont icon-you"></span>
                            </div>
                        </li>
                        <li>当前没有待支付订单。</li>
                        <li>当前没有待收货订单。</li>
                        <li>当前没有回收站订单。</li>
                    </ul>

                </div>
            </div>
        </div>

    </div>
</div>


<!-- 底部导航栏 -->
<th:block th:include="footer"/>


<script src="/mi/JS/currency.js"></script>
<script src="/mi/JS/order.js"></script>
</body>
</html>
